<template>
  <div class="xmlReview">
    <div class="review">
      <h1 class="title">社交自动化模板预览</h1>
      <h2><span>模板名称：</span>{{info.name}}</h2>
      <div class="head">
        <img v-if="userInfo.avatar" :src="userInfo.avatar" alt="" style="border: 1px solid #ddd">
        <img v-else src="../../../../public/img/head.png" alt=""  style="border: 1px solid #ddd">
        <p>{{userInfo.account}}</p>
      </div>
      <div class="review-content" v-html="info.content">
      </div>
      <div class="else-file">
        <img v-show="info.photos.length>0"  v-for="item in info.photos" :src="item" alt="">
        <video v-show="info.video" :src="info.video"></video>
      </div>
    </div>
  </div>
</template>

<script>
    import {xmlTemplateDetail} from '@/api/automation/xml'
    import {getDetail} from "@/api/socialAutomation"
    import {mapState} from "vuex";

    export default {
        name: "socialReview",
        data() {
            return {
                detail: {},
                info: {}
            }
        },
        computed: {
            ...mapState({
                userInfo: state => state.user.userInfo
            }),
        },
        mounted() {
            this.getDetail()
        },
        methods: {
            getDetail() {
                getDetail(this.$route.params.id).then(res => {
                    if (res.data.success) {
                        this.detail = res.data.data;
                        this.getTemplate()
                    }
                })
            },
            getTemplate() {
                xmlTemplateDetail(this.detail.templateId).then(res => {
                    if (res.data.success) {
                        this.info = res.data.data;
                    }
                })
            },
            //转换文件单位
            dealSize(size) {
                size = size.toString();
                if (size.indexOf('KB') != -1) {
                    return size;
                }
                let result = parseInt(size / 1024);
                if (result > 1024) {
                    return parseInt(result / 1024) + 'M';
                }
                return result + 'KB';
            },
            //判断文件类型
            filterType(str) {
                const arr = ['.jpeg', '.png', '.jpg'];
                let state = false;
                arr.map(item => {
                    if (str.indexOf(item) != -1) {
                        state = true
                    }
                })
                return state;
            }
        }
    }
</script>

<style scoped lang="scss">
  .xmlReview {
    width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    overflow-y: scroll;
    padding-bottom: 150px;
    height: 100%;

    .review {
      width: 1024px;
      margin: 0 auto;

      .title {
        color: #435B77;
        line-height: 40px;
        font-size: 19px;
        padding: 70px 0 50px 0;
      }

      h2 {
        font-size: 17px;
        color: #333;
        line-height: 45px;

        span {
          font-size: 15px;
        }
      }

      .head {
        display: flex;
        align-items: center;
        margin: 20px 0;

        p {
          color: #333;
          font-size: 17px;
          margin-left: 10px !important;
        }

        img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
      }

      .review-content {
        text-indent: 2rem;
        font-size: 15px;
        line-height: 35px;
      }

      .else-file {
        margin-top: 20px;
        img{
          max-width: 150px;
        }
      }
    }
  }
</style>
